import { Component, OnInit, ViewChild } from '@angular/core';
import { Lesson4MenuComponent } from './lesson4-menu/lesson4-menu.component';
import { Lesson4ServiceService } from './lesson4-service.service';

@Component({
  selector: 'app-lesson4',
  templateUrl: './lesson4.component.html',
  styleUrls: ['./lesson4.component.scss'],
  providers: [ Lesson4ServiceService ]
})
export class Lesson4Component implements OnInit {

  @ViewChild('menu') menu: Lesson4MenuComponent;

  menuActiveIndex = 0;
  /**
   * 右侧菜单配置
   */
  menuTitle = '组件之间的交互';
  menuData = [
    { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true, link: 'one'},
    { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false, link: 'two'},
    { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false, link: 'three'},
    { name: '父组件监听子组件的事件', disabled: false, active: false, link: 'four'},
    { name: '父组件与子组件通过本地变量互动', disabled: false, active: false, link: 'five'},
    { name: '父组件调用@ViewChild()', disabled: false, active: false, link: 'six'},
    { name: '父组件和子组件通过服务来通讯', disabled: false, active: false, link: 'seven'},
    { name: '这是个被禁止的菜单', disabled: true, active: false}
  ];
  constructor(private lesson4Service: Lesson4ServiceService) {
  }
  ngOnInit() {
    // 初始化后执行改变标题的方法
    this.changeMenuTitle();
  }

  get getmenuActiveName() {
    const data = this.menuData.filter(v => v.active);
    return data && data[0].name || '没有标题';
  }
  /**
   * 改变菜单的标题
   */
  changeMenuTitle() {
    setInterval(() => {
      const num = new Date().getSeconds();
      this.menuTitle = `组件之间的交互${num}`;
    }, 1000);
  }

  /**
   *
   * 接收到子组件的消息，并设置menuActiveIndex
   */
  changeMenu($event) {
    // 接收到子组件的消息，并设置menuActiveIndex
    this.menuActiveIndex = $event;
  }

  /**
   * 上页和下页
   */
  goToMenu(type) {
    type === 'prev' ? this.menu.prevMenu() : this.menu.nextMenu();
  }

  /**
   * 高亮切换
   */
  changeMenuHeightColor($event) {
    this.lesson4Service.menuHeightColor = $event;
  }
}
